<script setup>
  import Sidebar from "@/apps/admin/components/Sidebar.vue";
  import {ElContainer, ElAside, ElHeader, ElMain, ElFooter, ElMessage} from 'element-plus';
  import request from "@/apps/admin/utils/request.js";
  import {useRouter} from "vue-router";
  import {Menu, Operation} from "@element-plus/icons-vue";
  import {ref} from "vue";

  const router = useRouter()
  function logout(){
    request.post("/v1/admin/logout").then(body => {
      if (body.code === 200){
        localStorage.removeItem("adminToken");
        router.push({name: "login"})
      } else {
        ElMessage.error("错误")
      }
    })

  }
  const adminUsername = localStorage.getItem("adminUsername");
  const isCollapsed = ref(true)
  const toggleCollapse = () => {
    isCollapsed.value = !isCollapsed.value
    // 通知父组件或布局控制器去展开/收起侧边栏
    // 例如通过 emit 或全局状态控制
    // ElMessage.info(isCollapsed.value ? '已折叠菜单' : '已展开菜单')
  }

</script>


<template>
    <el-container style="min-height: 100vh;">
      <el-header style="margin: 0">
        <el-menu
            class="el-menu-demo"
            mode="horizontal"
            :ellipsis="false"
            style="display: flex; align-items: center; "
        >
          <!-- 折叠按钮 -->
          <div
            class="collapse-btn"
            style="padding: 0 10px;  cursor: pointer; display: flex; align-items: center; -webkit-tap-highlight-color: transparent;"
            @click="toggleCollapse"
          >
            <svg style="height: 25px; width: 25px" class="icon" viewBox="0 0 1024 1024"  xmlns="http://www.w3.org/2000/svg"><path d="M323.0208 139.9296h614.5536v61.44H323.0208zM93.9008 139.9296h111.872v61.44H93.9008zM323.0208 479.0272h614.5536v61.44H323.0208zM93.9008 479.0272h111.872v61.44H93.9008zM323.0208 818.0736h614.5536v61.44H323.0208zM93.9008 818.0736h111.872v61.44H93.9008z" fill="#454E60" ></path></svg>

          </div>


          <!-- 居中靠左的标题 -->
          <div style="flex: 1; font-size: 18px; color: #666; font-weight: bold; user-select: none;">
            预约系统后台
          </div>

          <!-- 用户下拉菜单 -->
          <el-sub-menu>
            <template #title>{{ adminUsername }}</template>
            <el-menu-item @click="logout">退出登录</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-header>

      <el-container style="height: 100%" >
        <el-aside v-if="isCollapsed" style="background: #eee; width: 220px">
          <Sidebar/>
        </el-aside>
        <el-main >
          <router-view name="mainContainer"></router-view>
        </el-main>
      </el-container>
    </el-container>

</template>

<!--    style="--el-main-padding: 10px"-->


<style scoped>

</style>